<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>应用管理</el-breadcrumb-item>
				<el-breadcrumb-item>编辑广告</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item label="是否启用">
								<el-switch :active-value="1" :inactive-value="0" v-model="model.status"></el-switch>
							</el-form-item>
							<el-form-item prop="advertId" label="所属广告位">
								<el-select v-model="model.advertId" placeholder="请选择...">
									<el-option v-for="item in advertList"
										:key="item.id"
										:label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="startTime" label="开始时间">
								<el-date-picker v-model="model.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间"></el-date-picker>
							</el-form-item>
							<el-form-item prop="endTime" label="结束时间">
								<el-date-picker v-model="model.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"></el-date-picker>
							</el-form-item>
							<el-form-item prop="filePath" label="上传文件">
								<dt-upload-text v-model="model.filePath"
									placeholder="请上传视频或图片文件"
									:exts="uploadConfig.fileExtension"
									:size="uploadConfig.attachSize"
									action="/upload">
								</dt-upload-text>
							</el-form-item>
							<el-form-item prop="title" label="内容标题">
								<el-input v-model="model.title" placeholder="广告内容的标题，128字符内"></el-input>
							</el-form-item>
							<el-form-item prop="linkUrl" label="跳转链接">
								<el-input type="text" v-model="model.linkUrl" placeholder="站外链接仅电脑端支持"></el-input>
							</el-form-item>
							<el-form-item prop="sortId" label="排序数字">
								<el-input v-model="model.sortId" placeholder="数字越小越排前"></el-input>
							</el-form-item>
							<el-form-item prop="content" label="备注说明">
								<el-input type="textarea" :rows="5" v-model="model.content" placeholder="支持HTML代码"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" :loading="loading" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.linkUrl('/other/banner/list')">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	import DtUploadText from '../../../components/DtUploadText.vue'
	
	export default {
		components: {
			DtUploadText
		},
		props: {
			id: 0
		},
		data() {
			return {
				activeName: 'info',//当前选项卡
				labelPosition: 'right',//表单对齐方式
				loading: false,
				uploadConfig: {},
				advertList: [],
				model: {
					id: 0,
					advertId: null,
					title: null,
					telPhone: null,
					siteUrl: null,
					logoUrl: null,
					sortId: 99,
					isRecom: 0,
					status: 1,
					addTime: null
				},
				rules: {
					advertId: [
						{ required: true, message: '请选择所属广告位', trigger: 'change' }
					],
					title: [
						{ required: true, message: '请输入内容标题', trigger: 'blur' }
					],
					startTime: [
						{ required: true, message: '请选择开始时间', trigger: 'change' }
					],
					endTime: [
						{ required: true, message: '请选择结束时间', trigger: 'change' }
					],
					sortId: [
						{ required: true, message: '请输入排序数字', trigger: 'blur' }
					]
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				//获取系统信息
				_this.$api.request({
					url: `/client/setting/uploadconfig`,
					success(res) {
						_this.uploadConfig = res.data;
					}
				});
				//加载广告位列表
				_this.$api.request({
					url: '/admin/advert/view/0',
					success(res) {
						_this.advertList = res.data;
					}
				});
				//如果是修改则加载详情
				if (_this.id) {
					_this.$api.request({
						url: '/admin/advert/banner/' + _this.id,
						loading: true,
						success(res) {
							_this.model = res.data;
						}
					});
				}
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					//提交表单,Id大于0则修改，否则添加
					if (_this.model.id > 0) {
						_this.$api.request({
							method: 'put',
							url: '/admin/advert/banner/' + _this.model.id,
							data: _this.model,
							successMsg: '修改广告内容已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//跳转列表页
								_this.$common.linkUrl('/other/banner/list');
							},
							complete() {
								_this.loading = false
							}
						});
					} else {
						_this.$api.request({
							method: 'post',
							url: '/admin/advert/banner',
							data: _this.model,
							successMsg: '新增广告内容已成功',
							beforeSend() {
								_this.loading = true
							},
							success(res) {
								//重置表单
								_this.$refs['editForm'].resetFields();
							},
							complete() {
								_this.loading = false
							}
						});
					}
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>

<style lang="scss">
</style>